<template>
  <div class="list">
    <van-grid :gutter="7" :column-num="2">
      <van-grid-item v-for="item in product_list" :key="item.id">
        <router-link to="/GoodsDetails">
          <div class="main-img">
            <lazy-component>
              <img :src="item.image_path" alt="" v-lazy="item.image_path" />
            </lazy-component>
          </div>
          <div class="info">
            <div class="title">{{ item.title }}</div>
            <div class="brand">{{ item.brand_name }}</div>
            <div class="tags"></div>
            <div class="price">
              <div class="now">¥{{ item.price }}</div>
              <div class="old">¥{{ item.market_price }}</div>
            </div>
          </div>
        </router-link>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      product_list: [
        {
          id: '13092581',
          title: '元祖萌虎鲜奶蛋糕',
          market_price: '158.00',
          price: '158.00',
          image_path: 'https://img.dangaoss.com/public/p/50/33/1331996_l.jpg',
          brand_name: '元祖',
          brand_id: '3'
        },
        {
          id: '13092582',
          title: '元祖萌虎鲜奶蛋糕',
          market_price: '158.00',
          price: '158.00',
          image_path: 'https://img.dangaoss.com/public/p/50/33/1331996_l.jpg',
          brand_name: '元祖',
          brand_id: '3'
        },
        {
          id: '13092583',
          title: '元祖萌虎鲜奶蛋糕',
          market_price: '158.00',
          price: '158.00',
          image_path: 'https://img.dangaoss.com/public/p/50/33/1331996_l.jpg',
          brand_name: '元祖',
          brand_id: '3'
        },
        {
          id: '13092584',
          title: '元祖萌虎鲜奶蛋糕',
          market_price: '158.00',
          price: '158.00',
          image_path: 'https://img.dangaoss.com/public/p/50/33/1331996_l.jpg',
          brand_name: '元祖',
          brand_id: '3'
        },
        {
          id: '13092585',
          title: '元祖萌虎鲜奶蛋糕',
          market_price: '158.00',
          price: '158.00',
          image_path: 'https://img.dangaoss.com/public/p/50/33/1331996_l.jpg',
          brand_name: '元祖',
          brand_id: '3'
        },
        {
          id: '13092586',
          title: '元祖萌虎鲜奶蛋糕',
          market_price: '158.00',
          price: '158.00',
          image_path: 'https://img.dangaoss.com/public/p/50/33/1331996_l.jpg',
          brand_name: '元祖',
          brand_id: '3'
        },
        {
          id: '13092587',
          title: '元祖萌虎鲜奶蛋糕',
          market_price: '158.00',
          price: '158.00',
          image_path: 'https://img.dangaoss.com/public/p/50/33/1331996_l.jpg',
          brand_name: '元祖',
          brand_id: '3'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.list {
  margin: 6px 0;
  .van-grid {
    padding: 0 0.24rem !important;
    .van-grid-item:nth-child(2n) {
      padding: 0 !important;
    }
    .main-img {
      width: 3rem;
      height: 3rem;
      img {
        display: block;
        width: 100%;
      }
    }
  }
  .info {
    width: 100%;
    margin-top: 0.14rem;
    .title {
      padding-top: 1px;
      font-size: 0.26rem;
    }
    .brand {
      font-size: 0.24rem;
      margin-top: 0.15rem;
      padding-top: 1px;
      color: #666;
    }
    .tags {
      margin-top: 0.16rem;
      height: 0.35rem;
      line-height: 0.35rem;
    }
    .price {
      margin-top: 0.1rem;
      display: flex;
      align-items: baseline;
      .now {
        font-size: 0.3rem;
        color: #ff3f4f;
      }
      .old {
        color: #666;
        font-size: 0.24rem;
        margin-left: 0.12rem;
        text-decoration: line-through;
        font-size: 0.2rem;
      }
    }
  }
}
</style>
